<template>
	<div>
		<div class="text-xl">【热门标签信息】</div>
		<div ref="target" class="w-full h-full"></div>
	</div>
</template>
<script setup>
import { onMounted, ref, reactive, watch, nextTick } from 'vue'
import * as echarts from 'echarts'
import 'echarts-wordcloud'
import { getVisTagList } from '@/api/admin/tag'

const data = ref([])
// const data = ref([
// 	{name: '学前端', value: 1},
// 	{name: '运维', value: 2},
// 	{name: '学Java', value: 3},
// 	{name: '如何部署Jenkins', value: 4},
// 	{name: 'Docker入门到精通', value: 5},
// 	{name: 'Python爬虫', value: 6},
// 	{name: '嵌入式开发', value: 7},
// 	{name: 'IE工程师', value: 8},
// ])

const getTagList = async () => {
	const res = await getVisTagList()
	if (res.success) {
		data.value = res.data
	}
	nextTick(() => {
		renderChart();
	})
}
getTagList()

// 获取 dom 实例
const target = ref(null)

// echarts 实例变量
let mChart = null
// 在 mounted 生命周期之后，实例化 echarts
onMounted(() => {
	mChart = echarts.init(target.value)
	// 渲染 echarts
	renderChart()
})

/**
 * 生成随机色值
 */
const randomRGB = () => {
	const r = Math.floor(Math.random() * 255)
	const g = Math.floor(Math.random() * 255)
	const b = Math.floor(Math.random() * 255)
	return `rgb(${r}, ${g}, ${b})`
}

// 渲染图表
const renderChart = () => {
	const options = {
		series: [
			{
				// 类型
				type: 'wordCloud',
				// 数据映射文本的大小范围
				sizeRange: [8, 46],
				// 文字旋转范围
				rotationRange: [0, 0],
				// 单词之间的间距
				gridSize: 0,
				// 渲染动画
				layoutAnimation: true,
				// 字体
				textStyle: {
					// 随机色值
					color: randomRGB
				},
				// 高亮字体
				emphasis: {
					textStyle: {
						fontWeight: 'bold',
						color: '#000'
					}
				},
				// 数据
				data: data.value
			}
		]
	}

	mChart.setOption(options)
}


// 洗牌算法随机打乱数组
function shuffleArray(array) {  
  // for (let i = array.length - 1; i > 0; i--) {  
  //   const j = Math.floor(Math.random() * (i + 1));  
  //   [array[i], array[j]] = [array[j], array[i]];  
  // }
	// console.log(array);
	array.forEach(item => {
		item.value = Math.floor(Math.random() * 41) + 10
	})
  return array;  
}

// 每隔3秒更新数据
setInterval(() => {
  data.value = shuffleArray(data.value)
}, 3000)

// 监听数据的变化，重新渲染图表
watch(() => data.value, () => renderChart(), { deep: true })

</script>